<template>
  <div  v-show="show" v-cloak>
    <div>
      <Header ref="header" @goStart="verify"></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="noproduce" v-if="search_status == false">
              <img src="../../static/image/meiyoujieguo.png" alt="">
              <p>暂时没有本产品，您可以联系购车服务中心进行海外定制，客服电话：{{tel}}</p>
          </div>
          <div class="assessmentlia">
            <ul class="assessmentli">
              <li :class="{'active' : prodceindex == index}" v-for="(item,index) in prodceList" @click="produceClick(index)"><span>{{item}}</span></li>
            </ul>
          </div>
          <div class="car-info">
            <!--有关产品-->
            <div v-if="prodceindex == 0">
              <div>
                <ul class="brand_ul2 brand_service_ul">
                  <li v-for="(item,index) in carlist" @click="uploaddetail(item.mo_id)">
                    <img src="../../static/image/e_1111.png" alt="" class="ve_img">
                    <img :src="item.mo_image" alt="">
                    <div>
                      <h3>{{item.mo_name}}</h3>
                      <div class="car_li">
                        <span>能源:{{item.energy_name}}</span>
                        <span>结构:{{item.mo_car_body}}</span>
                        <h3>价格：<span>{{item.mo_guide_price}}</span></h3>
                      </div>
                      <div class="car_li">
                        <span>级别:{{item.level_name}}</span>
                        <span>变速箱:{{item.gearbox_name}}</span>
                        <span>销量:{{item.mo_sales}}</span>

                      </div>
                      <div class="car_li">
                        <span>排量:{{item.displacement_name}}</span>
                        <span>发动机:{{item.drive_name}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <!--文章咨询-->
            <div v-if="prodceindex == 1">
                <ul class="brand_ul4 brand_service_ul">
                  <li  v-for="(item,index) in likelist" @click="ServiceDetail(item.ar_id)">
                    <img :src="item.ar_image" alt="">
                    <div>
                      <h3 v-html="item.ar_title"></h3>
                      <p v-html="item.ar_introduce"></p>
                      <p class="case_p" style="display: block;font-size: 14px;">
                        <span class="fr">上传人:{{item.ar_author}}</span>
                        <span>{{item.time}}</span>
                      </p>
                    </div>
                  </li>
                </ul>
            </div>
            <!--车评中心-->
            <div v-if="prodceindex == 2">
                <ul class="brand_ul4 brand_service_ul">
                  <li  v-for="(item,index) in EvaluationList" @click="cardetail(item.ev_id)">
                    <img :src="item.ev_image" alt="">
                    <div>
                      <h3 v-html="item.ev_title"></h3>
                      <p v-html="item.introduction"></p>
                      <ul class="ve_cp">
                        <li>{{item.time}}</li>
                        <li>上传人：{{item.us_nickname}}</li>
                        <li>
                          <span>标签:</span>
                          <ul>
                            <li v-for="(item_a,index_a) in item.label_array">{{item_a}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
            </div>
            <!--论坛-->
            <div v-if="prodceindex == 3">
              <div class="forum" v-for="(item,index) in ForumList">
                <span>{{item.fo_type}}论坛</span>
                <div class="post-list">
                  <div class="basic-box">
                    <span class="po_de" v-if="item.fo_hot == '热'">热</span>
                    <span class="po_de" v-if="item.fo_essence == '精华'">精</span>
                    <span v-if="item.fo_stick == '置顶'" class="po_img"><img src="../../static/image/y_8.png" alt=""></span>
                    <div class="left portrait">
                      <img :src="item.us_headimg"/>
                    </div>
                    <div class="left">
                      <p class="name">
                        {{item.us_nickname}}
                      </p>
                      <p class="time">
                        {{item.time}}
                      </p>
                    </div>
                    <div class="left level">
                      Lv.6
                    </div>
                    <div class="right quality">
                      {{item.fo_essence}}
                    </div>
                    <div class="clear"> </div>
                  </div>
                  <div class="content">
                    <div class="title" v-html="item.fo_title">

                    </div>
                    <div class="text" v-html="item.fo_content">
                    </div>
                    <!--<div class="img-box">-->
                      <!--<img src="/static/img/y_7.7732219.png">-->
                    <!--</div>-->
                    <div data-v-7a3a1d8c="" class="reply-click">
                  <span data-v-7a3a1d8c="">
                     回复: {{item.fo_reply_number}}
                  </span>
                      <span data-v-7a3a1d8c="">
                       点击:{{item.fo_click_number}}
                  </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pageul">
              <Page :total="count" :page-size="limit"  prev-text="上一页" next-text="下一页" show-total @on-change="changepage"></Page>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  import { mapState } from 'vuex'
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs
    },
    data () {
      return {
        tel: '',
        prodceList: ['有关产品', '文章/咨讯', '车评中心', '论坛'],
        prodceindex: 0,
        count: 0,
        cate: '',
        skey: '',
        role: '',
        page: 0,
        limit: 6,
        show: false,
        carlist: [],
        likelist: [],
        EvaluationList: [],
        ForumList: [],
        url: 'Car/getCarList',
        urlList: ['Car/getCarList', 'User/getArticleLikeList', 'Evaluation/getEvaluationList', 'Forum/getForumList'],
        getCarListAjax: true,
        search_status: true
      }
    },
    computed: mapState({
      crumbs: state => state.crumbs
    }),
    created: function () {
      this.verify()
    },
    activated: function () {
      console.log(444444)
      this.verify()
    },
    mounted: function () {
      this.$refs.header.skeysearch = this.skey
    },
    methods: {
      cardetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/Revehicle/AssessmentDetail',
          query: {
            cate: '搜索',
            skey: thisObj.skey,
            ev_id: id
          }
        })
        window.open(routeUrl.href, '_self')
      },
      ServiceDetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/Revehicle/ServiceDetail',
          query: {
            cate: '搜索',
            skey: thisObj.skey,
            ar_id: id
          }
        })
        window.open(routeUrl.href, '_self')
      },
      produceClick: function (index) {
        this.prodceindex = index
        this.url = this.urlList[index]
        this.getCarListAjax = true
        this.page = 0
        this.getCarList()
      },
      lookAll: function () {
        let routeUrl = this.$router.resolve({
          path: '/TransactionHistory',
          query: {
            name: ''
          }
        })
        window.open(routeUrl.href, '_self')
      },
      upload: function () {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/UploadAssessmentCar',
          query: {
            name: thisObj.cate
          }
        })
        window.open(routeUrl.href, '_self')
      },
      uploaddetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/ProduceDetail',
          query: {
            cate: thisObj.cate,
            skey: thisObj.skey,
            mo_id: id
          }
        })
        window.open(routeUrl.href, '_self')
      },
      products: function () {
        if (this.productsname === '只看官网测评') {
          this.productsname = '查看全部'
          this.role = '官方'
        } else {
          this.productsname = '只看官网测评'
          this.role = ''
        }
        this.getEvaluationList()
      },
      carcateclick: function (caid, index) {
        this.ca_id = caid
        this.page = 0
        this.vehicleList = []
        this.getCarListAjax = true
        this.getCarList()
      },
      changepage (index) {
        console.log(index)
        this.page = index - 1
        this.vehicleList = []
        this.getCarListAjax = true
        this.getCarList()
      },
      goback: function () {
        let routeUrl = this.$router.resolve({
          path: '/'
        })
        window.open(routeUrl.href, '_self')
      },
      getCarList: function () {
        let thisObj = this
        if (!thisObj.getCarListAjax) {
          return false
        }
        thisObj.getCarListAjax = false
        thisObj.$chaos.ajax({
          data: {
            skey: thisObj.skey,
            page: thisObj.page,
            limit: thisObj.limit
          },
          slient: true,
          userinfo: false,
          url: thisObj.url,
          callback: function (type, res) {
            thisObj.getCarListAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              if (thisObj.url === 'Car/getCarList') {
                thisObj.search_status = res.result.search_status
              }
              if (thisObj.page === 0) {
                thisObj.count = parseInt(res.result.count)
              }
              if (thisObj.url === 'Car/getCarList') {
                thisObj.carlist = res.result.list
              }
              if (thisObj.url === 'User/getArticleLikeList') {
                thisObj.likelist = res.result.list
              }
              if (thisObj.url === 'Evaluation/getEvaluationList') {
                thisObj.EvaluationList = res.result.list
              }
              if (thisObj.url === 'Forum/getForumList') {
                thisObj.ForumList = res.result.list
              }
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        /* 客服电话 */
        // 获取客服电话
        thisObj.$chaos.ajax({
          data: {
          },
          slient: true,
          userinfo: false,
          url: 'Index/getServiceTelData',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.tel = res.result.tel
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
        thisObj.prodceindex = 0
        thisObj.url = 'Car/getCarList'
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        thisObj.skey = decodeURI(thisObj.$chaos.getQueryString('skey'))
//        thisObj.$refs.header.skeysearch = thisObj.skey
        var crumbs = []
        crumbs[0] = {
          title: '搜索',
          link: ''
        }
        if (this.skey === '') {
          crumbs[1] = {
            title: '全部',
            link: ''
          }
        } else {
          crumbs[1] = {
            title: this.skey,
            link: ''
          }
        }
        this.$store.commit('crumbs', crumbs)
        thisObj.getCarList()
      }
    }
  }
</script>
<style>
  .post-list .content .text{
    line-height: 30px!important;
  }
  .main-title span {
    font-size: 16px!important;
  }
  .basic-box{
    position: relative;
  }
  .po_img{
    position: absolute;
    right: 0px;
    top: 8px;
  }
  .po_de{
    position: absolute;
    background: url("../../static/image/lt_14.png");
    width: 45px;
    height: 30px;
    background-size: cover;
    color: #fff;
    text-align: center;
    font-size: 18px;
    right: 0px;
    top: 8px;
  }
  .nocontent{
    text-align: center;
    clear: both;
    font-size: 20px;
    color: #949494;
    overflow: hidden;
    padding-top: 60px;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
  *{
    font-family: '微软雅黑';
  }
</style>
<style scoped>
  .post-list{
    cursor: pointer;
  }
  .post-list .basic-box {
    overflow: hidden;
  }
  .ve_cp>li{
    float: left;
    margin-right:20px;
    color: #6d6d6d;
    font-size: 14px;
  }
  .ve_cp>li>span{
    float: left;
  }
  .ve_cp>li>ul{
    float: left;
  }
  .ve_cp li>ul>li{
    float: left;
    padding:0px 10px;
    line-height: 22px;
    border:1px solid #7790ec;
    color: #7790ec;
    text-align: center;
    margin-left:30px;
  }
  .ve_cp>li:last-child{
    float: right;
    margin-right:0px;
  }
  .ve_cp{
    overflow: hidden;
    margin-top:30px;
  }
  .post-list .portrait {
    padding-right: 20px;
  }
  .left {
    float: left;
  }
  .post-list .portrait img {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
  }
  .post-list .name {
    color: #272E81;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    padding-top: 0px;
  }
  post-list .time {
    font-size: 12px;
    color: #444;
  }
  .post-list .level {
    color: #fff;
    margin: 10px 0 0 20px;
    line-height: 40px;
    font-size: 14px;
    background: url("../../static/image/i_1.png");
    width: 94px;
    padding-left: 30px;
    text-align: center;
  }
  .quality {
    width: 40px;
    color: #fff;
    line-height: 28px;
    background: url("../../static/image/lt_14.png");
    text-align: center;
    margin-top: 20px;
  }
  .post-list .content {
    padding: 20px 0px 0 60px;
  }
  .text{
    color: #000;
  }
  .post-list .content .title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .post-list .content .title:hover{
    color: #6d6d6d;
  }
  .post-list .content .title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .post-list .content .img-box {
    padding-top: 30px;
  }
  .post-list .content .reply-click {
    color: #888;
    padding-top: 10px;
    text-align: right;
    letter-spacing: 1px;
    font-size: 16px;
  }
  .post-list .content .reply-click span {
    padding-left: 20px;
  }
  .forum>span{
    display:block ;
    width:167px;
    height:50px;
    background: url("../../static/image/u_551.png");
    background-size: cover;
    color: #fff;
    font-size: 20px;
    line-height: 56px;
    padding-left: 27px;
    text-align: left;
    position: absolute;
    top: -6px;
    left: -10px;
  }
  .forum{
    margin:30px 0px 50px;
    overflow: hidden;
    background: #f3faff;
    border-radius: 0px 120px 0px 0px;
    position: relative;
    padding: 100px 175px 65px 65px;
  }
  .brand_ul4>li>div{
    margin-left: 350px;
    margin-top: 20px;
  }
  .brand_ul4>li>div>h3{
    margin-bottom: 20px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: justify;
    font-size: 18px;
  }
  .brand_ul4>li>div>p{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: justify;
    font-size: 16px;
    line-height: 33px;
  }
  .brand_ul4>li>div>p[data-v-1f3ca4e0] {
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: justify;
    font-size: 16px;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height: 1700px;
  }
  .brand_ul4>li{
    margin-top: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background-position: 8px 6px;
    background-size: 13px;
    background: none!important;
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul4>li h3{
    margin-bottom: 20px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .brand_ul4>li>img{
    width: 320px;
    height: 270px;
    float: left;
  }
  .noproduce{
    margin:50px 0px;
    overflow: hidden;
    text-align: center;
  }
  .noproduce>img{
    width:147px;
    margin:20px 0px;
  }
  .noproduce>p{
    font-size: 16px;
    margin-top:40px;
  }
  .assessmentli {
    width: 100%;
    height: 50px;
    background: #d5f3fe;
    box-shadow: 3px 2px 4px #ccc;
    clear: both;
    overflow: hidden;
    margin: 47px 0px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .assessmentli li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .assessmentli li span {
    width: 149px;
    height: 50px;
    color: #000;
    font-size: 19px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
  }
  .assessmentli li:nth-child(2),.assessmentli li:nth-child(3){
    text-align: center;
  }
  .assessmentli li:nth-child(4){
    text-align: right;
  }
  .assessmentli li.active span,.assessmentli li span:hover{
    background: url("../../static/image/ts_2.png");
    background-size: cover;
    color: #fff;
    cursor: pointer;
  }
  .ve_img{
    position: absolute;
    left:0px;
    top:0px;
    width: 20px!important;
    height:20px!important;
  }
  .car_li{
    padding: 12px 0px 10px;
    overflow: hidden;
    height:60px;
    line-height: 16px;
  }
  .car_li>h3{display: inline-block}
  .car_li>h3>span{color: #fe6567}
  .car_li>span{
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 600;
  }
  .car_li>span:first-child{
    width:320px;
  }
  .car_li>span:nth-child(2){
    width: 250px;
  }
  .car_li>span:nth-child(3){

  }
  .brand_ul2 > li > div{
    position: relative;
  }
  .hot{
    position: absolute;
    background: url("../../static/image/lt_14.png");
    width:45px;
    height: 30px;
    background-size: cover;
    color: #fff;
    text-align: center;
    font-size: 18px;
    right:0px;
    top:8px;
  }
  .pruduce_kl{overflow: hidden}
  .pruduce_kl>ul{
    margin-left: 100px;
    overflow: hidden;
  }
  .clearall{
    color: #000!important;
  }
  .pruduce_kl>ul>li>img{
    position: absolute;
    right:3px;
    top:2px;
    cursor: pointer;
  }
  .pruduce_kl>ul>li{
    float: left;
    padding: 0px 25px 15px 25px;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    margin-top:2px;
    position: relative;
    color: #528df5;
  }
  .pruduce_k,.pruduce_kl>span{
    float: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-right:20px;
  }
  .pruduce_k>img{
    padding: 10px 15px;
  }
  .pruduce_k>span,.pruduce_k>img{
    float: left;
  }
  .pruduce_kl{
  }
  .prodceli{
    overflow: hidden;
    padding: 15px 0px 0px 0px;
  }
  .prodceli>ul{
    margin-left:100px;
  }
  .prodceli>ul>li{
    float: left;
    padding: 0px 20px 15px 20px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    margin-top:2px;
  }
  .prodceli>span{
    width: 100px;
    float: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 6px;
  }
  .search{
    padding: 20px;
    overflow: hidden;
    border: 1px solid #f3f3f3;
    border-radius: 10px 10px;
    box-shadow: -3px 4px 10px #f1f1f1;
    margin-bottom: 50px;
  }
  .ve_cp{
    overflow: hidden;
    margin-top:30px;
  }
  .vehicle_b>li:hover img, .vehicle_b>li.active img{
    border: 2px solid #abe8ff;
  }
  .ve_cp>li{
    float: left;
    margin-right:20px;
    color: #6d6d6d;
    font-size: 14px;
  }
  .ve_cp>li>span{
    float: left;
  }
  .ve_cp>li>ul{
    float: left;
  }
  .ve_cp li>ul>li{
    float: left;
    padding:0px 10px;
    line-height: 22px;
    border:1px solid #7790ec;
    color: #7790ec;
    text-align: center;
    margin-left:30px;
  }
  .ve_cp>li:last-child{
    float: right;
    margin-right:0px;
  }
  .vehicle_ac{
    width:480px;
    float: right;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .vehicle_a1{
    background: url("../../static/image/k_30.png");
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 50px;
    width: 198px;
    background-size: cover;
    font-size: 18px;
    float: left;
    cursor: pointer;
  }
  .vehicle_a2{
    border:1px solid #7790ec;
    text-align: center;
    color: #7790ec;
    height: 38px;
    line-height: 38px;
    width: 180px;
    font-size: 18px;
    float: right;
    margin-top:6px;
    cursor: pointer;
  }
  .brand_ul2 li{
    background: none!important;
  }
  .brand_ul2>li{
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul2>li:hover{
    color: #6d6d6d;
  }
  .case_p{
    margin-top:30px;
    color: #6d6d6d;
  }
  .case_p .fr{
    float: right;
  }
  .brand_ul2>li>img{
    width:350px;
    height:250px;
    float: left;
  }
  .brand_ul2>li>div{
    margin-left:380px;
    margin-top: 20px;
  }
  .brand_ul2>li h3{
    font-size: 28px;
    font-weight: 600;
  }
  .brand_ul2>li p{
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .brand_service_ul>li{
    position: relative;
  }

  .topc ul li {
    cursor: pointer;
  }
  .brand_ul2>li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2>li h3 {
    margin-bottom: 20px;
  }
  .brand_ul2>li p {
    line-height: 33px;
    font-size: 16px;
    height:99px;
  }
  .vehicle, .vehicle_b{
    width:100%;
    clear: both;
    overflow: hidden;
  }
  .vehicle_b>li img{
    border:2px solid #4aaff7;
    width:155px;
    height:155px;
    cursor: pointer;
  }
  .vehicle_b{
    margin: 0px -12px;
  }
  .vehicle_a{
    overflow: hidden;
    margin: 0px -32px;
  }
  .vehicle_b>li p{
    text-align: center;
    margin:20px 0px;
    font-size: 18px;
    font-weight: 500;
  }
  .vehicle_b>li{
    width:216.6px;
    float: left;
    text-align: center;
  }
  .vehicle_a>li{
    width:103px;
    overflow: hidden;
    float: left;
    text-align: center;
    height:70px;
  }
  .vehicle_a li.active span,.vehicle_a li span:hover{
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    background:url("../../static/image/p_21.png");
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    font-size: 18px;
  }
  .vehicle_a li span{
    font-size: 18px;
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    color: #000;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
  }
  .vehicle>h3{
    font-size: 18px;
    line-height: 40px;
    margin:20px 0px;
    font-weight: 600;
  }
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
  .car-info{
    padding-top: 20px;
  }
  .car-info .right-module{
    width: 289px;
  }
  .car-info .right-item .module-title{
    background: url("../../static/image/k_29.png") center center no-repeat;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
  }
  .car-info .right-item .module-content{
    padding:10px 0;
  }
  .car-info .right-item .history .year{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 15px;
  }
  .car-info .right-item .history li{
    line-height: 40px;
    padding-left:20px;
    position: relative;
    font-size: 14px;
    color:#888;
  }
  .car-info .right-item .history li .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background: #3D6AE6;
    position: absolute;
    left: 0;
    top: 17px;
  }
  .car-info .right-item .look-all{
    color: #000;
    font-size: 14px;
    text-align: right;
    padding-top: 10px;
    cursor: pointer;
  }
  .enter-arrow-icon{
    width:6px;
    height: 11px;
    display: inline-block;
    background-image: url("../../static/image/k_20.png");
  }
  .recommend li{
    padding-bottom: 10px;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car img{
    display: block;
    width:100%;
  }
  .right-module-car .car-cover{
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    letter-spacing: 2px;
  }
  .recommend li .advantage{
    letter-spacing: 2px;
    line-height: 24px;
    padding-top: 15px;
    color: #666;
  }
  .recommend li>a{
    display: block;
  }
  .review .car-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .review .review-content{
    padding:10px 0;
    color: #666;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 2px;
  }
  .review h4{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 100;
  }
  .review a{
    display: block;
  }
  .answer_lo{
    float: left;
    width:955px;
  }
</style>
